<template>
    <div class="page">
        <!-- <div class="head">
      <van-icon @click="goback" class="back-icon" name="arrow-left" />
      <Title></Title>
    </div> -->
        <div class="base-info">
            <p class="tit">
                <span>{{ this.dataInfo.METHOD || '-' }}({{ this.dataInfo.YEAR || '-' }}年)</span>
                <!-- <span class="more">已办结</span> -->
            </p>
            <p class="subtit">
                <span>违规事项：<span>{{ this.dataInfo.CONTENT || '-' }}</span></span>
            </p>
            <p class="subtit">
                <span style="padding-right: 20px;">派发人：<span>{{ this.dataInfo.EMPE_NM || '-' }}</span></span>
                <span>派发时间：<span>{{ this.dataInfo.SEND_TM || '-' }}</span></span>
            </p>
            <div class="con">
                <p class="row">
                    <span class="row-tit">违规内容：</span>
                    <span class="con-col">{{ this.dataInfo.DESCRIPTION || '-' }}
                    </span>
                </p>
                <p class="row">
                    <span class="row-tit">工作建议：</span>
                    <span class="con-col">{{ this.dataInfo.ADVICE || '-' }}</span>
                </p>

            </div>
        </div>
        <div class="timer" v-if="dataInfo.STATUS_CODE == 0 && timerVal > 0">
            <p><span>学习倒计时(<span>{{ timerVal }}</span>s)</span></p>
        </div>

        <van-overlay class="overlay" :show="showOverlay" @click="showOverlay = false">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <van-icon name="cross" class="icon" @click="onCancel" />
                    <p class="tit">还未学习完，是否返回</p>
                    <div class="btns">
                        <van-button plain type="info" @click="onSure">是</van-button>
                        <van-button type="info" @click="onCancel">否</van-button>
                    </div>
                </div>
            </div>
        </van-overlay>
    </div>
</template>

<script>

import Title from '@/components/commonTitle.vue'
import { getCaseData } from '@/api/case';
import { Toast, Dialog } from 'vant';

export default {
    name: 'caseDetail',
    components: { Title, },
    data() {
        return {
            showOverlay: false,
            dataInfo: {},
            timerVal: 30,
            timer: null,
            isShowTimer: false, // todo 标记一个状态显示底部倒计时，可能需要从接口获取？？
            searchQry: {
                code: '80308',
                pagenum: 0,
                pagesize: 10,
                // sortdatafield,
                // sortorder,
            },
            qrydata: {
                NUM_TYPE: 2, // 固定值：2 1查询、2学习
                NUM_STUDY_ID: '', // 学习id
            }
        }
    },
    watch: {
        '$route.query.rowdata'(val) {
            if (val) {
                this.getInfo()
                let newVal = JSON.parse(val)
                if (newVal.STATUS_CODE == 0) {
                    this.timerVal = 30
                    this.handleTimer()
                }
            }
        }
    },
    async created() {
        await this.getInfo()
        if (this.dataInfo.STATUS_CODE == 0) {
            // console.log('-1111');
            this.timerVal = 30
            this.handleTimer()
        }
        // this.handleStudy()
    },
    methods: {
        getInfo() {
            if (this.$route.query.rowdata) {
                this.dataInfo = JSON.parse(this.$route.query.rowdata)
            }
        },
        async handleStudy() {
            if (this.dataInfo.STUDY_ID) this.qrydata.NUM_STUDY_ID = this.dataInfo.STUDY_ID || ''
            let qry = {
                ...this.searchQry,
                params: JSON.stringify(this.qrydata)
            }

            const res = await getCaseData(qry)
            // console.log(res, '-----handleStudy----res');
            if (res && res.data && res.data.NUM_RESULT_CODE == 0) {
                Toast('已完成学习～')
            }

            // this.dataInfo = res.data.VALUE_LIST[0]
            // console.log(this.dataInfo);

        },
        handleTimer() {
            this.timer = setInterval(() => {
                if (this.timerVal < 1) {
                    this.handleStudy()
                    return clearInterval(this.timer)
                }
                --this.timerVal
            }, 1000)

        },
        goback() {
            clearInterval(this.timer)
            if (this.dataInfo.STATUS_CODE == 0 && this.timerVal > 0) {
                this.showOverlay = true
            } else {
                this.$router.push({
                    path: '/',
                    query: {
                        active: this.$route.query.activeType
                    }
                })
            }
        },
        // 点击是，返回
        onSure() {
            this.showOverlay = false
            this.$router.push({
                path: '/',
                query: {
                    active: this.$route.query.activeType,
                }
            })
        },
        // 点击否，继续学习
        onCancel() {
            this.showOverlay = false
            if (this.timerVal) this.handleTimer()
        }
    },
    beforeDestroy() {
        clearInterval(this.timer)
    },
    beforeRouteLeave(to, from, next) {
        if (this.dataInfo.STATUS_CODE == 0 && this.timerVal > 0) {
            next(false)
            clearInterval(this.timer)
            Dialog.confirm({
                title: '还未学习完，是否返回',
                showCancelButton: true,
                confirmButtonText: '否',
                cancelButtonText: '是',
                confirmButtonColor: '#397FF9',
                className: 'confirm-dialog',
                closeOnPopstate: false,
            }).then(() => {
                // 否：继续学习
                if (this.timerVal) this.handleTimer()
                next(false)
            }).catch(() => {
                // 是：返回
                next(true)
            })
        } else {
            next(true)
        }
    }
}
</script>

<style lang="less" scoped>
.page {
    height: 100%;
    background: #fff;
    overflow: hidden;

    .head {
        position: relative;
        // height: 100px;
        // line-height: 100px;

        .back-icon {
            position: absolute;
            left: 30px;
            z-index: 999;
            font-size: 28px;
            line-height: 100px;
            color: #fff;
            cursor: pointer;
            width: 50px;
        }
    }

    .base-info {
        padding: 30px;
        // border: 1px solid #ebedf0;
        // margin-bottom: 30px;
        height: calc(100% - 147px);
        overflow: auto;

        &:last-child {
            margin-bottom: 0;
        }

        .tit {
            display: flex;
            justify-content: space-between;
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 500;
            font-size: 28px;
            color: #333333;
            // line-height: 42px;
            // height: 48px;
            padding-bottom: 30px;

            .more {
                font-size: 26px;
                color: #7F8389;
            }
        }

        .subtit {
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 400;
            font-size: 26px;
            color: #5A4F4F;
            // line-height: 40px;
            padding-bottom: 24px;
        }

        .con {
            border-top: 1px solid #DEDEDE;
            // display: flex;
            // flex-direction: column;
            font-family: SourceHanSansCN, SourceHanSansCN;
            font-weight: 400;
            font-size: 26px;
            color: #5A4F4F;
            padding-top: 20px;

            .row {
                width: 100%;
                display: flex;
                flex-direction: column;
                // justify-content: space-between;
                // min-height: 56px;
                // line-height: 40px;
                margin-bottom: 44px;

                &:last-child {
                    margin-bottom: 0;
                }

                .row-tit {
                    // width: 132px;
                    // display: inline-block;
                }

                .con-col {
                    color: #7F8389;
                    // display: -webkit-box;
                    // -webkit-box-orient: vertical;
                    // -webkit-line-clamp: 3;
                    // overflow: hidden;
                    line-height: 40px;
                }
            }
        }
    }

    .timer {
        // width: 100%;
        height: 76px;
        line-height: 76px;
        background: #397FF9;
        color: #fff;
        text-align: center;
        margin: 0 30px;
        border-radius: 10px;
        // position: absolute;
        // bottom: 0;
        // left: 0;

        p {
            span {
                display: inline-block;
                vertical-align: middle;
                font-family: SourceHanSansCN, SourceHanSansCN;
                font-weight: 500;
                font-size: 32px;
                color: #FFFFFF;
                // line-height: 76px;
            }
        }
    }

    .overlay {
        z-index: 999;

        .wrapper {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100%;
        }

        .block {
            width: 638px;
            height: 320px;
            background: #FFFFFF;
            box-shadow: 0px 4 8px 0px rgba(184, 184, 184, 0.5);
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            text-align: center;
            position: relative;

            .icon {
                position: absolute;
                top: 20px;
                right: 20px;
                cursor: pointer;
                font-size: 28px;
                color: #A8A8A8;
            }

            .tit {
                font-family: SourceHanSansCN, SourceHanSansCN;
                font-weight: 500;
                font-size: 32px;
                color: #333333;
                line-height: 48px;
                font-style: normal;
            }

            .btns {
                display: flex;
                justify-content: space-evenly;

                /deep/ .van-button {
                    width: 216px;
                    height: 72px;
                    border-radius: 10px;
                    // border: 2px solid #397FF9;
                }
            }
        }
    }
}
</style>